<template>
  <view class="biscuit-order">
    <view class="order-status flex justify-between">
      订单状态
      <label class="text-primary">{{ ORDER_STATUS[info.orderStatus] }}</label>
    </view>
    <view class="order-goods">
      <view class="goods-cover cover w-80px h-80px" :style="{ backgroundImage: `url(${product.productImageUrl})` }">
      </view>
      <view class="flex-1 leading-none flex-col px-12px h-80px py-2px">
        <view class="mb-27px text-goods">{{ product.productName }}</view>
        <text class="text-xxs text-999">规格：{{ skuLabel(product.productSkuSpData) }}</text>
      </view>
      <text>共{{ product.productSkuQuantity }}件</text>
    </view>
    <view class="order-action flex justify-end pb-15px leading-none">
      <view class="text-999 pt-24px text-xxs">共 {{ product.productSkuQuantity }} 件商品 实付</view>
      <view class="pt-13px ml-48px">
        <view class="flex text-primary text-default items-end">
          <image class="w-17px h-20px mr-4px" :src="ossImg('order/aoliao_icon.png')" />
          {{ info.scoreAmount }}小饼干
        </view>
        <button class="text-primary" @click.stop="link2Detail">订单详情</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineEmits, computed } from "vue"
import { ORDER_STATUS } from "@/CONSTANT"
import { ossImg } from "@/utils/utils";

// const emits = defineEmits(['add'])
const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  }
})

const product = computed(() => (props.info.items[0] || {}))
const skuLabel = skuData => {
  return skuData.map(({ value, key }) => `${key}${value}`).join(' ')
}

const link2Detail = () => {
  uni.navigateTo({ url: `/personalPages/biscuit/order-detail?id=${props.info.id}` })
}
</script>

<style lang="less" scoped>
.biscuit-order {
  padding: 0 20px;
  background-color: white;
  box-sizing: border-box;
  font-size: 14px;

  .order-status {
    display: flex;
    align-items: center;
    height: 43px;
    font-weight: bold;
  }

  .order-goods {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F2F2F2;
    border-top: 1px solid #F2F2F2;
  }

  .order-action {
    button {
      width: 93px;
      height: 24px;
      line-height: 23px;
      padding: 0;
      background: #FFFFFF;
      border: 1px solid #999999;
      border-radius: 12px;
      font-size: 14px;
      margin: 11px 0 0 auto;
    }
  }
}
</style>
